<template>
  <div class="example-container">
    <h2>机构切换组件示例</h2>
    
    <div class="example-section">
      <h3>基本用法</h3>
      <p>点击按钮打开机构选择弹窗：</p>
      <OrganizationSwitcher />
    </div>

    <div class="example-section">
      <h3>在Header中使用</h3>
      <p>组件已集成到Layout.vue的header右上角：</p>
      <div class="mock-header">
        <div class="header-content">
          <div class="logo">
            <h3>贷后管理系统</h3>
          </div>
          <div class="header-actions">
            <OrganizationSwitcher />
            <div class="user-info">
              <span>用户</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3>功能说明</h3>
      <ul>
        <li>✅ 支持搜索机构名称或账号</li>
        <li>✅ 网格布局显示所有机构</li>
        <li>✅ 选中状态高亮显示</li>
        <li>✅ 预留登录函数接口</li>
        <li>✅ 响应式设计</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import OrganizationSwitcher from './OrganizationSwitcher.vue';
</script>

<style scoped>
.example-container {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.example-section {
  margin-bottom: 32px;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fafafa;
}

.example-section h3 {
  margin-top: 0;
  color: #1890ff;
}

.mock-header {
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  padding: 16px;
  margin-top: 12px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h3 {
  margin: 0;
  color: #1890ff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  padding: 8px 16px;
  background: #f5f5f5;
  border-radius: 4px;
  color: #666;
}

ul {
  margin: 12px 0;
  padding-left: 20px;
}

li {
  margin: 8px 0;
  color: #666;
}
</style>
